<template>
  <div class="startup">
    <Back title="Gate.io Startup"></Back>
    <div class="startup_mid">
      <div id="div1">
        <h1>Gate.io Startup</h1>
        <h3>区块链项目打折促销通道</h3>
        <p>Gate.io Startup 旨在帮助区块链行业的创新和技术进步，提供优质区块链项目（包括BTC，ETH等）打折促销通道</p>
      </div>
    </div>
    <div class="startup_list">
      <div id="list_div1">
        <table>
          <tr>
            <td>全部（{{ total }}）</td>
            <td style="color:red">进行中{{ total }}</td>
            <td>已结束（12）</td>
          </tr>
        </table>
      </div>
      <div v-for="data in datas" :key="data.id" id="list_div2">
        <div id="i1">
          <table>
            <tr>
              <td rowspan="4"><img :src="data.path" /></td>
              <td colspan="2">{{ data.name }}</td>
            </tr>
<!--            <tr>-->
<!--              <td><span>{{ data.method[0] }}</span></td>-->
<!--              <td><span>{{ data.method[1] }}</span></td>-->
<!--            </tr>-->
            <tr>
              <td>已筹款：</td>
              <td>{{ data.raised }}%</td>
            </tr>
            <tr>
              <td>目标：</td>
              <td>{{ data.targetMoney }}USDT</td>
            </tr>
          </table>
        </div>
        <div id="i2">
          <div id="sp1">距开始：<span>{{ formatTime(data.updateTime) }}</span></div>
          <div id="sp2">进行中</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Back from "../../components/BackNavbar.vue";
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { startUpPublish } from "../../apis/api.js";
import { da } from "element-plus/es/locales.mjs";
let datas = ref([]);

let intervalId;
const getStartUp = () =>
    startUpPublish().then(res => {
      datas.value = res.data.data;
      initializeRemainingTime();
      intervalId = setInterval(updateRemainingTime, 1000); // 每秒更新一次
    })

// 在页面加载时调用方法
// 设置定时器
onMounted(() => {
  getStartUp();
});

// const total = ref(datas.value.filter((data) => data.state === "进行中").length);

// 将时间字符串转换为毫秒
function parseTimeString(timeString) {
  const timeParts = timeString.match(/(\d+)天(\d+):(\d+):(\d+)/);
  if (timeParts) {
    const days = parseInt(timeParts[1], 10);
    const hours = parseInt(timeParts[2], 10);
    const minutes = parseInt(timeParts[3], 10);
    const seconds = parseInt(timeParts[4], 10);
    return ((days * 24 + hours) * 3600 + minutes * 60 + seconds) * 1000; // 转换为毫秒
  }
  return 0;
}

// 初始化剩余时间
function initializeRemainingTime() {
  datas.value.forEach(data => {
    data.updateTime = parseTimeString(data.soldTime);
  });
}

// 格式化剩余时间为 "X天X小时X分钟X秒"
function formatTime(ms) {
  const totalSeconds = Math.floor(ms / 1000);
  const days = Math.floor(totalSeconds / 86400);
  const hours = Math.floor((totalSeconds % 86400) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
}

// 更新剩余时间
function updateRemainingTime() {
  datas.value.forEach(data => {
    if (data.updateTime > 0) {
      data.updateTime -= 1000; // 每秒减少1000毫秒
    }
  });
}

onBeforeUnmount(() => {
  clearInterval(intervalId); // 清理定时器
});
</script>

<style scoped>
.startup_header {
  background-color: white;
  width: 100%;
}

.startup_header table {
  margin: 0 auto;
  text-align: center;
}

.startup_header img {
  width: 25px;
  height: 25px;
}

.startup_mid {
  background-color: firebrick;
  width: 100%;
  height: 200px;
  text-align: left;
}

#div1 {
  margin-left: 10px;
  padding-top: 17px;
}

.startup_mid h1,
.startup_mid h3 {
  font-family: "Calibri Light";
  color: white;
}

.startup_mid p {
  color: white;
  font-size: small;
}

.startup_list #list_div1 {
  width: 100%;
  height: 30px;
  background-color: white;
  border: white;
  box-shadow: 0px 0px 7px 0px lightgrey;
}

.startup_list #list_div1 table {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 480px;
  color: lightslategrey;
  font-size: small;
}

#list_div2 {
  width: 100%;
  height: 170px;
  box-shadow: 0px 0px 5px silver;
  margin-top: 13px;
  border-radius: 8px;
}

#list_div2 img {
  width: 100px;
  height: 100px;
}

#list_div2 #i1 {
  margin: auto;
}

#list_div2 #i2 {
  width: 100%;
  height: 27px;
  margin: auto;
  margin-top: 20px;
}

#list_div2 #sp1 {
  float: left;
  width: 70%;
  height: 100%;
  font-size: small;
  background-color: blanchedalmond;
  border-radius: 3px;
  text-align: left;
  line-height: 27px;
}

#list_div2 #sp2 {
  float: left;
  width: 30%;
  height: 100%;
  font-size: small;
  background-color: chocolate;
  border-radius: 3px;
  text-align: center;
  line-height: 27px;
}
</style>